<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="优惠项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入优惠项目名称"  ></a-input>
            </a-form-model-item> 
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="优惠对象范围" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="area">
              <a-select ref="select" v-model="model.area" placeholder="请选择优惠对象范围">
                <a-select-option value="全国">全国</a-select-option>
                <a-select-option value="本省">本省</a-select-option> 
                <a-select-option value="本市">本市</a-select-option>
               </a-select > 
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="优惠对象类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                <a-select v-model="model.type" mode="multiple" placeholder="请选择优惠对象类别"  >
                    <a-select-option value="退役军人">退役军人</a-select-option>
                    <a-select-option value="残疾军人">残疾军人</a-select-option> 
                    <a-select-option value="烈士遗属">烈士遗属</a-select-option>
                    <a-select-option value="因公牺牲军人遗属">因公牺牲军人遗属</a-select-option>
                    <a-select-option value="病故军人遗属">病故军人遗属</a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col> 
          <a-col :span="24">
            <a-form-model-item  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="discount">
              <span slot="label">
                优惠折扣&nbsp;
                <a-tooltip title="0为免费,输入0-10之间的折扣数,如:8.8">
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <a-input-number
                v-model="model.discount"
                :min="0"
                :max="9.9"
                :precision="1"
                :step="0.1" 
                addon-after="折"
                style="text-align: right;"
              />
              <span style="padding:0 10px">折</span>
            </a-form-model-item>
          </a-col> 
          <a-col :span="24">
            <a-form-model-item label="享受优待方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="way">
              <a-input v-model="model.way" placeholder="请输入享受优待方式"  ></a-input>
            </a-form-model-item>
          </a-col> 
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script> 

  export default {
    name: 'SysServiceDiscountForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          way:"出示优待证或优待证(电子版)"
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          name:[{ required: true, message: '请输入优惠项目名称' }],
          area:[{ required: true, message: '请选择优惠对象范围' }],
          type:[{ required: true, message: '请选择优惠对象类别' }],
          discount:[{ required: true, message: '请输入优惠折扣' }],
          way:[{ required: true, message: '请输入享受优待方式' }],
        }, 
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
              // let str = (that.model.name+"：面向"+that.model.area+(that.model.type.join("、"))+that.model.discount+"折。")+"\n"+("享受优待方式："+that.model.way)+(that.model.remark?("。\n备注："+that.model.remark+"。"):'')
              that.$emit('ok',{...this.model,type:this.model.type.join('、')});
          }
        })
      },
    }
  }
</script>